<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .fl {
        float: left;
      }
      .fr {
        float: right;
      }
      .clearfix {
        clear: both;
      }
      body {
        background-color: #f3f3f3;
      }
      .head {
        width: 1200px;
        margin: auto;
        font-size: 18px;
        color: #3c3d46;
      }
      li {
        list-style: none;
      }
      .nav li {
        float: left;
        width: 80px;
        height: 72px;
        margin-right: 24px;
        line-height: 72px;
        text-align: center;
      }
      .nav {
        margin-left: 159px;
      }
      .logo {
        margin-top: 7px;
      }
      .logo img {
        vertical-align: middle;
      }
      .act {
        background-color: #5696ff;
        color: #ffff !important;
      }
      .login {
        /* 这里单独加行高，是因为 line-height 属性会影响 img 元素*/
        line-height: 72px;
      }
      .head .line {
        margin: 0 10px;
      }
      .banner {
        height: 45px;
        background: url(../img/lesson_12/banner.jpg) no-repeat center;
        padding-top: 555px;
      }
      .banner-item {
        width: 53px;
        margin: auto;
      }
      .circle1,
      .circle2 {
        width: 16px;
        height: 16px;
        border-radius: 50%;
      }
      .circle1 {
        background: #fcfcfd;
      }
      .circle2 {
        border: 2px solid #fcfcfd;
        box-sizing: border-box;
      }
      .title .line {
        width: 78px;
        height: 6px;
        background-color: #666666;
        margin-top: 18px;
      }
      .area {
        width: 327px;
        margin: 60px auto 0;
      }
      .title h1 {
        font-size: 36px;
        margin-left: 14px;
        color: #5696ff;
      }
      .sub-title {
        font-size: 22px;
        color: #666666;
        text-align: center;
        margin-top: 22px;
      }
      .search {
        width: 350px;
        margin: 70px auto 0;
        position: relative;
      }
      .search input {
        width: 350px;
        height: 40px;
        border: 1px solid #666666;
        border-radius: 5px;
      }
      .search img {
        position: absolute;
        top: 9px;
        right: 14px;
      }
      .pic_list {
        width: 1210px;
        margin: 55px auto;
      }
      .pic {
        width: 119px;
        height: 373px;
        float: left;
        margin-right: 3px;
      }
      .sichuan {
        background: url(../img/lesson_13/sichuan.png);
      }
      .dali {
        background: url(../img/lesson_13/dali.png);
      }
      .denmark {
        width: 596px;
        background: url(../img/lesson_13/denmark.png);
      }
      .japan {
        background: url(../img/lesson_13/japan.png);
      }
      .italy {
        background: url(../img/lesson_13/italy.png);
      }
      .france {
        background: url(../img/lesson_13/france.png);
      }
      .pic_list .shadow {
        height: 303px;
        /* 在16进制色值后直接添加两位数字表示透明度（取值范围00-FF，即0%-100%） */
        background-color: rgba(51, 51, 51, 0.5);
        padding: 70px 0 0 31px;
      }
      .pic_list .shadow p {
        color: #fbfcfd;
        font-size: 28px;
        line-height: 30px;
      }
      .play_button {
        width: 76px;
        margin: auto;
      }
      .more_button {
        width: 160px;
        height: 54px;
        margin: 72px auto;
        border: 1px solid;
        border-radius: 5px;
        line-height: 54px;
        text-align: center;
        font-size: 26px;
        color: #fefefe;
        background-color: #5696ff;
      }
      .more {
        width: 160px;
        height: 54px;
        margin: 72px auto;
        border: 2px solid #5696ff;
        border-radius: 5px;
        line-height: 54px;
        text-align: center;
        font-size: 26px;
        color: #5696ff;
        background: none;
      }
      .discount {
        margin: 107px auto 50px;
      }
      .discount_area {
        width: 1200px;
        margin: auto;
      }
      .discount_left_up_item,
      .discount_left_down_item {
        width: 900px;
      }
      .discount_denmark,
      .discount_vetnan,
      .discount_thailand,
      .discount_malaysia,
      .six_days_japan,
      .six_days_india {
        font-size: 22px;
        color: white;
      }
      .discount_denmark,
      .discount_vetnan {
        width: 441px;
        height: 307px;
      }
      .discount_denmark div,
      .discount_thailand div,
      .discount_malaysia div,
      .six_days_japan div,
      .six_days_india div {
        padding-top: 50px;
        padding-left: 55px;
      }
      .discount_denmark {
        margin-bottom: 8px;
        background: url(../img/lesson_13/denmark_discount.jpg) no-repeat center;
      }
      .discount_vetnan {
        margin: 0 8px 8px;
        background: url(../img/lesson_13/vetnan.jpg) no-repeat center;
      }
      .cover {
        width: 315px;
        height: 180px;
        margin: 20px;
        padding: 30px;
        background-color: rgba(0, 0, 0, 0.3);
        border: 5px solid white;
      }
      .cover .price {
        font-size: 26px;
        margin-top: 16px;
      }
      .white_line {
        width: 90px;
        height: 4px;
        background-color: #ffffff;
        margin: 30px 5px;
      }
      .discount_thailand {
        width: 362px;
        height: 369px;
        background: url(../img/lesson_13/thailand.jpg) no-repeat center;
      }
      .discount_malaysia {
        width: 521px;
        height: 369px;
        background: url(../img/lesson_13/malaysia.jpg) no-repeat center;
        margin: 0 8px;
      }
      .six_days_japan {
        width: 300px;
        height: 472px;
        background: url(../img/lesson_13/japan_discount.jpg) no-repeat center;
        margin-bottom: 8px;
      }
      .six_days_india {
        background: url(../img/lesson_13/india.jpg) no-repeat center;
        width: 300px;
        height: 204px;
      }
      .tour_news {
        width: 1200px;
        background: url(../img/lesson_13/tour_news.jpg) no-repeat center;
        height: 745px;
        margin: 228px auto 0;
        position: relative;
      }
      .maxico {
        border: 41px solid #f3f3f3;
        position: absolute;
        top: -176px;
        right: 0;
      }
      .rule .line,
      .new-zealand-text-left .line {
        width: 132px;
        height: 7px;
        background-color: #666666;
        margin-left: auto;
        margin-bottom: 30px;
      }
      .w1200 {
        width: 1200px;
        margin: auto;
      }
      .rule p {
        width: 560px;
        font-size: 24px;
        line-height: 48px;
        color: #333333;
        text-indent: 2em;
      }
      .article {
        margin-top: 50px;
      }
      .rule h3,
      .new-zealand-text-left-title {
        text-align: right;
        color: #333333;
        font-size: 30px;
        font-weight: 500;
      }
      .ar_tit {
        margin-left: 160px;
      }
      .full-article {
        width: 180px;
        height: 60px;
        border: 3px solid #999999;
        border-radius: 5px;
        font-size: 26px;
        color: #333333;
        margin-top: 28px;
      }
      .full-article > p {
        width: 180px;
        text-align: center;
        line-height: 60px;
        text-indent: 0;
      }
      .tour_news2 {
        background: url(../img/lesson_13/landscape.jpg) no-repeat;
        height: 781px;
        position: relative;
        margin: 71px auto 50px;
      }
      .new-zealand {
        border: 47px solid #f3f3f3;
        position: absolute;
        top: 63px;
        /* 
          * 右侧位置 = 图片宽度 + border + padding + margin
          * 左侧同理
        */
        right: 0;
      }
      .new-zealand-text-left-title {
        margin-left: 214px;
      }
      .new-zealand-text-right p {
        width: 560px;
        font-size: 24px;
        line-height: 56px;
        margin-top: -220px;
      }
      .selected_article{
        width: 730px;
        height: 959px;
        background: url("../img/lesson_15/Dali.jpg") no-repeat center;
        /*margin-right: 16px;*/
      }
      .selected_article .shadow{
        width: 501px;
        height: 894px;
        background-color: rgba(0 0 0 / 0.3);
        padding: 65px 36px 0 36px;
      }
      .selected_article_lane{
        font-size: 24px;
        color: #5696ff;
        margin-bottom:77px;
      }
      .selected_article_title{
        font-size: 24px;
        color: white;
        font-weight: normal;
      }
      .location{
        color: white;
        font-size: 20px;
      }
      .content{
        width: 451px;
        color: white;
        font-size: 18px;
        text-indent: 2em;
        line-height: 48px;
      }
      .datetime{
        color: white;
        font-size: 18px;
        text-align: right;
      }
      .article_item_warp{
        width: 443px;
        height: 432px;
        margin-bottom: 31px;
        background-color: white;
        padding-top: 32px;
      }
      .item_background_town,.item_background_mountain{
        width: 375px;
        height: 297px;
        margin: auto auto 12px;
      }
      .item_background_town{
        background: url("../img/lesson_15/Kawagbo_town.jpg")
      }
      .item_background_mountain{
        background: url("../img/lesson_15/Kawagbo_mountain.jpg");
      }
      .kawagbo,.dusk{
        text-align: center;
        font-size: 12px;
        background-color: #5696ff;
        color: white;
        margin: 13px 0 0 9px;
        height: 18px;
        line-height: 18px;
      }
      .kawagbo{
        width: 60px;
      }
      .dusk{
        width: 30px;
      }
      .article_title,.article_date{
        margin-bottom: 9px;
        margin-left: 34px;
      }
      .article_date{
        width: 61px;
        font-size: 12px;
      }
      .article_title{
        width: 210px;
        font-size: 14px;
        margin-bottom: 12px;
      }
      .article_contents{
        width: 375px;
        margin:auto;
        font-size: 12px;
      }
      .selected_photo{
        height: 472px;
        width: 1164px;
        box-shadow: #979797 0 0 20px 5px;
        margin-top: 57px;
        padding: 26px 0 0 18px;
        font-size: 24px;
        color: #5696ff;
        position: relative;
      }
      .photo_item{
        margin-right: 15px;
        margin-top: 29px;
        font-size: 18px;
        color: #666666;
      }
      .sign{
        font-size: 12px;
        color: #666666;
        margin-bottom: 11px;
      }
      .sign .name{
        margin-left: 21px;
      }
      .arrow_warp_left, .arrow_warp_right{
        width: 14px;
        height: 25px;
        background-color: white;
        padding: 13px 19px;
        position: absolute;
        top:224px;
      }
      .arrow_warp_right{
        right: 15px;
      }
      .bottom{
        background-color: #5696ff;
        height: 130px;
        margin-top: 65px;
        padding-top: 36px;
      }
      .bottom .info{
        width: 658px;
        margin: auto;
        color: white;
        font-size: 16px;
        line-height: 34px;

      }
    </style>
  </head>
  <body>
    <div class="warp">
      <div class="head">
        <div class="logo fl">
          <img src="../img/lesson_12/logo.png" alt="logo" />
          <img src="../img/lesson_12/brand.png" alt="brand" />
        </div>
        <ul class="nav fl">
          <li class="act">首页</li>
          <li>地区</li>
          <li>特惠</li>
          <li>资讯</li>
          <li>游记</li>
          <div class="clearfix"></div>
        </ul>
        <div class="login fr">
          <span>登录</span><span class="line">|</span><span>注册</span>
        </div>
        <div class="clearfix"></div>
      </div>
      <!-- banner 轮播图 -->
      <div class="banner">
        <div class="banner-item">
          <div class="circle1 cir fl"></div>
          <div class="circle2 cir fr"></div>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="search">
        <label>
          <input type="text" placeholder="请输入关键字" />
        </label>
        <img src="../img/lesson_13/search-icon.png" alt="search-icon" />
      </div>
      <!-- 地区旅游 -->
      <div class="area">
        <div class="title">
          <div class="line fl"></div>
          <h1 class="fl">地区旅游</h1>
          <div class="line fl"></div>
          <div class="clearfix"></div>
        </div>
        <div class="sub-title">从这开始有意思的地区文化</div>
      </div>
      <div class="pic_list">
        <div class="pic sichuan">
          <div class="shadow">
            <p class="text">四<br />川</p>
          </div>
        </div>
        <div class="pic dali">
          <div class="shadow">
            <p class="text">大<br />理</p>
          </div>
        </div>
        <div class="pic denmark">
          <div class="shadow">
            <p class="text">丹<br />麦</p>
            <div class="play_button">
              <img src="../img/lesson_13/play_button.png" alt="播放按钮" />
            </div>
          </div>
        </div>
        <div class="pic japan">
          <div class="shadow">
            <p class="text">日<br />本</p>
          </div>
        </div>
        <div class="pic italy">
          <div class="shadow">
            <p class="text">意<br />大<br />利</p>
          </div>
        </div>
        <div class="pic france">
          <div class="shadow">
            <p class="text">法<br />国</p>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="more">
        <span>More></span>
      </div>
      <div class="discount area">
        <div class="title">
          <div class="line fl"></div>
          <h1 class="fl">特惠行程</h1>
          <div class="line fr"></div>
          <div class="clearfix"></div>
        </div>
        <div class="sub-title">给你带来最省钱的旅游</div>
      </div>
      <div class="discount_area">
        <!-- TODO 特惠行程列表到旅游资讯标题-->
        <div class="discount_left fl">
          <div class="discount_left_up_item">
            <div class="discount_denmark fl">
              <div>丹麦5晚6日童话之旅</div>
            </div>
            <div class="discount_vetnan fr">
              <div class="cover">
                <div class="title">越南2晚3天美妙之旅</div>
                <div>
                  <div class="white_line fl"></div>
                  <span class="price fl">￥2300</span>
                  <div class="white_line fr"></div>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="discount_left_down_item">
            <div class="discount_thailand fl">
              <div>泰國3晚4日自由行</div>
            </div>
            <div class="discount_malaysia fr">
              <div>马来西亚5晚6日自由行</div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
        <div class="discount_right fr">
          <div class="six_days_japan">
            <div>日本5晚6日全景游</div>
          </div>
          <div class="six_days_india">
            <div>印度4晚6日经典游</div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="more_button">
        <span>More></span>
      </div>
      <div class="discount area">
        <div class="title">
          <div class="line fl"></div>
          <h1 class="fl">旅游资讯</h1>
          <div class="line fr"></div>
          <div class="clearfix"></div>
        </div>
        <div class="sub-title" style="font-size: 20px">
          各种奇妙有趣的新闻等你来发现哦
        </div>
      </div>
      <!-- 旅游资讯 -->
      <div class="tour_news">
        <img class="maxico" src="../img/lesson_13/Maxico.jpg" alt="Maxico" />
      </div>
      <div class="w1200 article">
        <div class="rule">
          <div class="ar_tit fl">
            <div class="line"></div>
            <h3>墨西哥关于<br />外国公民入境规定</h3>
          </div>
          <div class="fr">
            <p style="text-indent: 0">
              墨西哥对外国公民入境有严格的规定。为便于中国公民准备入境材料，驻墨西哥使馆将墨移民局提供的部分规定摘译整理如下，供来墨人员参考（以下规定最终解释权属墨方有关部门）：
            </p>
            <p>
              　　一、墨西哥《移民法》规定，外国公民入境墨西哥应满足如下要求：
            </p>
            <p>1、向墨西哥移民官员出示如下证件：</p>
            <p>　　（1）护照或现行国际法认可有效的身份和旅行证件；</p>
            <p>　　（2）合法有效签证（如需）......</p>
            <div class="full-article">
              <p class="article-word">完整文章</p>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="tour_news2 w1200">
        <div>
          <img
            class="new-zealand"
            src="../img/lesson_13/New Zealand.jpg"
            alt="新西兰"
          />
        </div>
      </div>
      <div class="new-zealand-text w1200">
        <div class="new-zealand-text-left fl">
          <div class="line"></div>
          <div class="new-zealand-text-left-title">
            <p>新西兰<br />明年准备征游客税</p>
          </div>
        </div>
        <div class="new-zealand-text-right fr">
          <p>
            据消息称，新西兰旅游部长表示，新西兰明年(2018年)将会引进游客税。
            <br />
            相关部门不希望新西兰旅游胜地的美誉受到影响，需要采取措施来帮助本地议会来应对越来越多的游客。
            Destination
            Queenstown表示，若是当地部门不采取措施来应对巨大的游客数量，皇后镇可能会像威尼斯和巴塞罗那一样，造成旅游业过度开发。
          </p>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="more">More</div>
      <!-- 游记分享 -->
      <div class="tour_share">
        <div class="discount area">
          <div class="title">
            <div class="line fl"></div>
            <h1 class="fl">游记分享</h1>
            <div class="line fr"></div>
            <div class="clearfix"></div>
          </div>
          <div class="sub-title">在这可以找到最好的旅游攻略</div>
        </div>
      </div>
      <div class="w1200">
        <div class="selected_article fl">
          <div class="shadow">
            <span class="selected_article_lane">精选文章</span>
            <h3 class="selected_article_title">大理，与阳光约会</h3>
            <p class="location">云南&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;大理&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;洱海</p>
            <p class="datetime" style="width: 450px">2017年1月13日</p>
            <div class="content">
              <p>寒假开始，我便踏上了开往云南的列车。武汉的冬天基本上是阴暗湿冷的，我多想赶快到达云南，拥抱温暖的阳光。</p>
              <p>十几天里，我在海埂长堤上喂过海鸥，在洱海沿线画了一个圈，在双廊享受面朝大海春暖花开的惬意，在丽江的阿安酸奶和前台的山东老乡晒太阳聊天，在虎跳峡和棒子们你追我赶。曾经嫌弃过大理的冷清，也曾经抱怨过丽江的物质。但是，当真正要离开的时候，满满的都是不舍...</p>
            </div>
          </div>
        </div>
        <div class="article_list fr">
          <div class="article_item_warp">
            <div class="item_background_town">
              <div class="img_font_warp">
                <div class="kawagbo fl">
                  <span class="kawagbo_font">卡瓦格博</span>
                </div>
                <div class="dusk fl">
                  <span class="dusk_font">黄昏</span>
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
            <div>
              <div class="article_date">
                <span class="date_font">2017.01.10</span>
              </div>
              <div class="article_title">泰国—活着的冲动，浮生一场春梦</div>
              <div class="article_contents">
                <span>
                  上世纪80年代，我的父母青春年少之时，生于小城镇的他们还穿着母亲亲手裁制的衣裤，过着粮票兑粮，精打细算的生活 当时的崔健还未成名，收音机里放的还是邓丽君、山口百惠.... 而此时的大...<a href="http://www.baidu.com">完整文章>></a>
                </span>
              </div>
            </div>
          </div>
          <div class="article_item_warp">
            <div class="item_background_mountain">
              <div class="img_font_warp">
                <div class="kawagbo fl">卡瓦格博</div>
                <div class="dusk fl">黄昏</div>
                <div class="clearfix"></div>
              </div>
            </div>
            <div>
              <div class="article_date">
                <span class="date_font">2017.04.15</span>
              </div>
              <div class="article_title">初见卡瓦格博</div>
              <div class="article_contents">
                <span>
                  飞来寺，斗转星移间，我们守望6740的日照金山。当一缕缕金色的光线，洒满卡瓦格博的峰尖，就在那一瞬间，我挣脱了重重桎梏，舍却了依依旧念，只为那游荡不安的心魂，从此越发疯癫...<a href="http://www.baidu.com">完整文章>></a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <!--   精选照片   -->
      <div class="w1200 selected_photo">
        <div class="photo_title">
          <p>精选照片</p>
        </div>
        <div class="photo_list">
          <div class="photo_item fl">
            <img src="../img/lesson_15/HeLan_mountain.jpg" alt="图片"/>
            <div class="sign">
              <p class="fl">2017.07.04</p>
              <p class="name fl">By Ever</p>
              <div class="clearfix"></div>
            </div>
            <p>深入贺兰山</p>
          </div>
          <div class="photo_item fl">
            <img src="../img/lesson_15/melted_snow.jpg" alt="图片"/>
            <div class="sign">
              <p class="fl">2017.07.04</p>
              <p class="name fl">By Ever</p>
              <div class="clearfix"></div>
            </div>
            <p>雪融山</p>
          </div>
          <div class="photo_item fl">
            <img src="../img/lesson_15/golden_snowmountain.jpg" alt="图片"/>
            <div class="sign">
              <p class="fl">2017.07.04</p>
              <p class="name fl">By Ever</p>
              <div class="clearfix"></div>
            </div>
            <p>金色雪山</p>
          </div>
          <div class="photo_item fl">
            <img src="../img/lesson_15/dusk_sea.jpg" alt="图片"/>
            <div class="sign">
              <p class="fl">2017.07.04</p>
              <p class="name fl">By Ever</p>
              <div class="clearfix"></div>
            </div>
            <p>黄昏与海</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="photo_arrow">
          <div class="arrow_warp_left">
            <img src="../img/lesson_15/left_arrow.jpg" alt="箭头"/>
          </div>
          <div class="arrow_warp_right">
            <img src="../img/lesson_15/right_arrow.jpg" alt="箭头"/>
          </div>
        </div>
      </div>
      <div class="more">
        <span>More></span>
      </div>
      <div class="bottom">
        <div class="info">
          <p>© 2017 Leyouyou.cn 粤ICP备12345678号 粤公网安备123456789012号 粤ICP证12345<br>
            营业执照 新出网证(粤)字123号 全国统一客服电话：0000-123-456</p>
        </div>
      </div>
    </div>
  </body>
</html>
